<template>
  <div class="matching">
    <TopInfo />
    <TopTabs @func="LoadValue" />
    <div class="content">
      <div class="filter-part">
        <div class="search-part">
          <el-input
            placeholder="请输入关键词搜索"
            v-model="keywords"
            prefix-icon="el-icon-search"
            class="input-with-select"
            @keyup.enter.native="SearchList()"
          >
            <el-button slot="append" type="primary" @click="SearchList()"
              >搜索</el-button
            >
          </el-input>
        </div>
      </div>
      <div class="match-count">
        为你查找到<span>{{ count }}</span
        >条记录
      </div>
      <ul v-if="active == 1" class="matching-list">
        <li
          v-for="item in resourceData1"
          :key="item.Id"
          @click="ToExpertDetail(item.Id)"
        >
          <div class="line1">
            {{ item.Pername
            }}<span class="fr"
              ><i
                :class="
                  item.IsCollect
                    ? 'el-icon-star-on star'
                    : 'el-icon-star-off star2'
                "
                @click.stop="Save(5, item.Id)"
              ></i
            ></span>
          </div>
          <div class="line2">职称：{{ item.Title }}</div>
          <!-- <div class="line3">
            <span class="fl">受理部门：湖南省科学技术厅</span>
          </div> -->
          <div class="line4">
            <span class="fl">电话：{{ item.Telphone }}</span>
            <span class="fr">{{ item.SendDate }}</span>
            <!-- <span class="fr"
              >匹配度：
              <i class="el-icon-star-on star"></i>
            </span> -->
          </div>
        </li>
      </ul>
    </div>
    <BottomInfo />
  </div>
</template>

<script>
import BottomInfo from "../components/BottomInfo";
import TopInfo from "../components/TopInfo";
import TopTabs from "../components/TopTabs";
export default {
  name: "Expert",
  data() {
    return {
      keywords: "",
      active: 1,
      limit: 100,
      page: 1,
      count: 0,
      resourceData1: [],
    };
  },
  methods: {
    LoadValue(data) {
      this.active = data;
      this.keywords = "";
      this.GetList();
    },
    GetList() {
      let url = "/Resource/GetExpertList";
      this.$axios({
        url,
        method: "post",
        data: {
          limit: this.limit,
          page: this.page,
          userdata: this.$cookies.get("userdata"),
          title: this.keywords,
        },
        transformRequest: [
          function (data) {
            let ret = "";
            for (let it in data) {
              ret +=
                encodeURIComponent(it) +
                "=" +
                encodeURIComponent(data[it]) +
                "&";
            }
            return ret;
          },
        ],
        headers: {
          "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8",
        },
      })
        .then((res) => {
          //console.log(res.data.data);
          this.resourceData1 = res.data.data;
          this.count = res.data.count;
        })
        .catch((err) => {
          //console.log(err);
        });
    },
    Save(type, id) {
      let a = id;
      this.$axios({
        url: "/User/AddUserCollect",
        method: "post",
        data: {
          userdata: this.$cookies.get("userdata"),
          policyid: a,
          typeid: type,
        },
        transformRequest: [
          function (data) {
            let ret = "";
            for (let it in data) {
              ret +=
                encodeURIComponent(it) +
                "=" +
                encodeURIComponent(data[it]) +
                "&";
            }
            return ret;
          },
        ],
        headers: {
          "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8",
        },
      })
        .then((res) => {
          for (let i = 0; i < this.resourceData1.length; i++) {
            if (this.resourceData1[i].Id == a) {
              this.resourceData1[i].IsCollect =
                !this.resourceData1[i].IsCollect;
            }
          }
          this.$message({
            message: res.data.msg,
            type: "success",
          });
        })
        .catch((err) => {
          //console.log(err);
        });
    },
    ToExpertDetail(id) {
      let api = "ExpertDetail";
      this.$router.push({ name: api, params: { id } });
      // this.$cookies.set("TopActive", 9);
    },
    SearchList() {
      this.GetList();
    },
  },
  mounted() {
    console.log(this.$route.params);
    // this.keywords = this.$route.params.Keywords;
    //console.log(this.$route.params.Keywords);
    // if (this.$route.params.Type) {
    //   this.active = this.$route.params.Type;
    // }
    if (this.$route.params.Keywords) {
      this.keywords = this.$route.params.Keywords;
    }
    this.GetList();
  },
  components: {
    BottomInfo,
    TopInfo,
    TopTabs,
  },
};
</script>

<style scoped>
.matching {
  min-height: 800px;
}
.content {
  background-color: #f4f6fc;
  padding: 25px 0;
}
.filter-part {
  background-color: #fff;
  box-shadow: 0px 0px 9px 0px rgba(9, 90, 255, 0.05);
  margin: 0 auto;
  width: 1200px;
  padding: 25px;
  box-sizing: border-box;
  padding-bottom: 0;
}
.search-part {
  padding: 30px 280px;
  border-bottom: 1px solid #eeeeee;
}
.area,
.year {
  padding: 12px 0;
  border-bottom: 1px solid #eeeeee;
  box-sizing: border-box;
  overflow: hidden;
  color: #333;
  font-size: 14px;
}
.year {
  border-bottom: none;
}
.area .title,
.year .title {
  width: 120px;
  text-align: center;
  padding: 5px 8px;
  box-sizing: border-box;
}
.area-list,
.year-list {
  width: 1030px;
}
.area-list li,
.year-list li {
  float: left;
  cursor: pointer;
  margin-right: 20px;
  padding: 5px 8px;
}
.area-list li:last-child,
.year-list li:last-child {
  margin-right: 0;
}
.area-list li.active,
.year-list li.active {
  color: #fff;
  background-color: #095aff;
}
.area-list li:hover,
.year-list li:hover {
  color: #fff;
  background-color: #095aff;
}
.match-count {
  width: 1200px;
  margin: 25px auto;
  height: 50px;
  line-height: 50px;
  background: #ffffff;
  color: #333;
  font-size: 14px;
  text-align: center;
}
.match-count span {
  color: #095aff;
  font-weight: bold;
  margin: 0 5px;
}
.matching-list {
  width: 1200px;
  background: #ffffff;
  box-shadow: 0px 0px 9px 0px rgba(9, 90, 255, 0.05);
  margin: 0 auto;
  padding: 25px 35px;
  box-sizing: border-box;
}
.matching-list li {
  padding: 25px 30px;
  border-radius: 10px;
  color: #333333;
  font-size: 16px;
  cursor: pointer;
}
.matching-list li:nth-child(2n + 1) {
  background: #f7f7f7;
}
.matching-list li .line1 {
  font-weight: bold;
  font-size: 22px;
  margin-bottom: 20px;
}
.matching-list li .line2 {
  margin-bottom: 10px;
}
.matching-list li .line3 {
  margin-bottom: 10px;
  overflow: hidden;
}
.matching-list li .line4 {
  overflow: hidden;
}
.matching-list li .line1 .star {
  color: #ffd34c;
  font-size: 30px;
  float: right;
  cursor: pointer;
}
.matching-list li .line1 .star2 {
  color: #ffd34c;
  font-size: 30px;
  float: right;
  cursor: pointer;
}
</style>
